<template>
  <div class="city-list">
    <!-- 头部导航栏 -->
    <navbar-comm title="收藏列表"></navbar-comm>
    <!-- /头部导航栏 -->
    <!-------- 没有数据时的页面 ------->
    <div class="not-found-page" v-if="myCollectHouse?.length === 0">
      <van-image
        width="150px"
        height="98px"
        :src="require('@/assets/imgs/not-found.png')"
        class="img"
      />
      <p class="text">您还没有收藏任何房源</p>
    </div>
    <!--------- /没有数据时的页面 ------>
    <!-- 房屋展示列表 -->
    <van-card
      v-for="(item, index) in myCollectHouse"
      :key="index"
      :price="item.price"
      :desc="item.desc"
      :title="item.title"
      :thumb="`http://liufusong.top:8080${item.houseImg}`"
    >
      <template #tags>
        <van-tag
          plain
          type="danger"
          class="tags"
          v-for="(tagItem, index) in item.tags"
          :key="index"
          >{{ tagItem }}</van-tag
        >
      </template>
    </van-card>
    <!-- /房屋展示列表 -->
  </div>
</template>

<script>
import NavbarComm from '@/components/NavbarComm.vue'
import { userCollectApi } from '@/api'
export default {
  name: 'collectList',
  components: { NavbarComm },
  props: {},
  data() {
    return {
      myCollectHouse: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getHotCityListFn()
  },
  methods: {
    async getHotCityListFn() {
      const { data } = await userCollectApi()
      // console.log(data)
      this.myCollectHouse = data.body
    }
  }
}
</script>

<style scoped lang="less">
.city-list {
  :deep(.van-nav-bar__content) {
    background-color: #21b97a;
    .leftArrow,
    .van-nav-bar__title {
      color: #fff;
    }
  }

  .not-found-page {
    text-align: center;
    .img {
      margin: 60px 0;
    }
    .text {
      font-size: 28px;
      .publish {
        color: #21b97a;
      }
    }
  }

  :deep(.van-card__title) {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: #394043;
  }
  :deep(.van-card__desc) {
    font-size: 24px;
    color: #afb2b3;
  }
  .tags {
    color: #39becd;
    background: #e1f5f8;
  }
  .van-card__price {
    font-size: 12px;
    color: #fa5741;
  }
}
</style>
